import { useState
    ,useEffect
 } from "react"

export const useTodos = ()=>{
    const [todos,setTodos] = useState(JSON.parse(
        localStorage.getItem("todos")
    ))

    // const [todos,setTodos] = [{
    //     id:1,
    //     text:"111",
    //     isComplete:false
    // }]

    useEffect(()=>{
        localStorage.setItem('todos',JSON.stringify(todos))
    },[todos])

    
    const addTodo =(text)=>{
        //setTodo
        //当数据状态是对象的时候 
        setTodos([
            ...todos,
            {
                id:Date.now(),
                text,
                isComplete:false
            }
        ])

    }

    const onToggle =(id)=>{
        
        setTodos(todos.map(
            todo => todo.id===id ? 
            {...todo,isComplete:!todo.isComplete}:
            todo
        ))
    }

    const onDelete =(id)=>{
        setTodos(todos.filter(
            todo => todo.id !== id
        ))
    }

    return {
        todos,
        setTodos,
        addTodo,
        onDelete,
        onToggle
    }
}

